<template>
  <div class="box">
    <div class="top">
      管 理 后 台
      <div class="top_right" @click="exitlogin">退出登录</div>
    </div>

    <div class="content">
      <div class="left">
        <el-radio-group style="margin-bottom: 20px">
        </el-radio-group>
        <el-menu
          default-active="1-4-1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">角色管理</span>
            </template>
            <el-menu-item-group>
              <span slot="title">角色管理</span>
              <el-menu-item index="1-1" @click="roleApply">
                <span slot="title">角色申请</span>
              </el-menu-item>
              <el-menu-item index="1-2" @click="assignRoles">
                <span slot="title">分配角色</span>
              </el-menu-item>
              <el-menu-item index="1-3" @click="RoleManagement">
                <span slot="title">角色管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item-group>
              <span slot="title">用户管理</span>
              <el-menu-item index="2-1" @click="userManagement">
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="2-2">2</el-menu-item>
              <el-menu-item index="2-3">3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">内容审核</span>
            </template>
            <el-menu-item-group>
              <span slot="title">内容审核</span>
              <el-menu-item index="3-1" @click="blogReviewClick">
                <span slot="title">内容审核</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </template>
            <el-menu-item-group>
              <span slot="title">导航四</span>
              <el-menu-item index="4-1">1</el-menu-item>
              <el-menu-item index="4-2">2</el-menu-item>
              <el-menu-item index="4-3">3</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BackgroundManage",
  data() {
    return {
     
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    // 管理退出登录
    exitlogin() {
      const h = this.$createElement;
      this.$msgbox({
        //提示框element写法
        title: "消息",
        message: h("p", null, [h("span", null, "确定退出 ")]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            this.$router.push({
              name: "ManageLogin",
            });
            sessionStorage.clear();
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 500);
          } else {
            done();
          }
        },
      });
    },

    // 跳转博客审核页面
    blogReviewClick() {
      this.$router.push({
        name: "BlogReview",
      });
    },
    // 跳转角色申请
    roleApply() {
      this.$router.push({
        name: "RoleApplyList",
      });
    },
    // 跳转分配角色
    assignRoles() {
      this.$router.push({
        name: "AssignRoles",
      });
    },
    // 跳转角色管理
    RoleManagement() {
      this.$router.push({
        name: "RoleManagement",
      });
    },
    // 跳转用户管理
    userManagement() {
      this.$router.push({
        name: "UserManagement",
      });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 整个组件页面 */
.box {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background-color: #fafafa;
}
.content {
  margin-top: 20px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* 头部 */
.top {
  box-sizing: border-box;

  line-height: 70px;
  background-color: #e7ebed;
  height: 100px;
  font-size: 30px;
  font-weight: 700;
  padding-left: 60px;
}
.top::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e65c";
  /* 必须加 */
  font-family: "iconfont";
  margin-right: 15px;
  font-size: 30px;
}
.top_right {
  float: right;
  font-size: 20px;
  cursor: pointer;
  margin-right: 50px;
}
.left {
  padding-left: 20px;
  width: 15%;
  height: 100%;

  float: left;
}
.right {
  float: left;
  width: 85%;
  height: 100%;
}
/* element导航栏菜单 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>